<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>在“拉”，勿扰</title>
    <style>
        :root {
            --sz: 10vmin;
            --tr: all 0.5s ease 0s;
        }

        * {
            box-sizing: border-box;
            transition: var(--tr);
        }

        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(205deg, #5c6279, #2d303b);
        }

        .toggle {
            position: relative;
            width: calc(var(--sz) * 4);
            height: calc(var(--sz) * 2);
            display: flex;
            align-items: center;
            justify-content: center;
            filter: drop-shadow(-2px 2px 4px #0003);
        }

        .toggle:before {
            content: '';
            position: absolute;
            width: 2vmin;
            top: 4vmin;
            height: calc(100% - 4vmin);
            background: #fff;
            left: -1.9vmin;
            clip-path: polygon(0% 0%, 18% 8%, 2% 39%, 21% 80%, 2% 90%, 15% 105%, 100% 100%, 100% 0%);
        }

        .toggle:after {
            content: '';
            position: absolute;
            width: 0.2vmin;
            top: 4vmin;
            left: 12.25vmin;
            height: calc(100% - 4vmin);
            background: repeating-linear-gradient(180deg, #ccc6 0 0.8vmin, #fff calc(0.8vmin + 1px) calc(0.8vmin + 2px));
        }

        input {
            display: none;
        }

        label[for='btn'] {
            position: absolute;
            width: calc(var(--sz) * 4);
            height: calc(var(--sz) * 2);
            background: linear-gradient(90deg, #fff 30%, #fff0 30%);
            background-size: 100% calc(100% - 4vmin);
            background-repeat: no-repeat;
            background-position: 0 4vmin;
            transition: background-size 0.5s ease 0s;
        }

        #btn:checked+label {
            background-size: 260% calc(100% - 4vmin);
        }

        label[for='btn']:before,
        label[for='btn']:after {
            content: 'ON';
            position: absolute;
            width: 50%;
            text-align: center;
            height: 100%;
            line-height: 23vmin;
            font-size: 8vmin;
            font-family: Arial, Helvetica, serif;
            transform: scaleY(1.1);
            padding: 0 2vmin;
            color: #9acd32;
            text-shadow: 0 1px 2px #0008, 0 -2px 1px #eee;
        }

        label[for='btn']:after {
            content: 'OFF';
            right: 0.5vmin;
            padding: 0;
            color: #292929cc;
            text-shadow: 0 -2px 2px #0008, 0 1px 2px #fff4;
            z-index: -10;
            text-align: right;
        }

        .thumb {
            position: absolute;
            width: calc(calc(var(--sz) * 2) - calc(var(--sz) / 3));
            height: calc(calc(var(--sz) * 2) - calc(var(--sz) / 30));
            top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -1.65));
            left: calc(calc(var(--sz) / 3) + calc(var(--sz) / 50));
            top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -15));
            left: calc(calc(var(--sz) / 10) + calc(var(--sz) * 0.35));
            background: repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), #fff;
            border-radius: 50% 50% 50% 50% / 15% 15% 15% 15%;
            box-shadow: calc(var(--sz) * -0.35) calc(var(--sz) * 0.35) calc(var(--sz) / 30) 0 #0004;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            overflow: hidden;
            background-repeat: repeat-y, repeat-y, repeat-y, no-repeat;
            background-size: 50% 1vmin, 50% 1vmin, 50% 1vmin, 100% 100%;
            background-position: -90% 0, 5% 0, 185% 0, 0 0;
        }

        #btn:checked+label .thumb {
            transition: var(--tr);
            left: calc(calc(100% - calc(calc(var(--sz) * 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz) * -0.075)));
            background-position: 150% 0, 150% 0, 285% 0, 0 0;
        }

        .thumb:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 25%;
            background: radial-gradient(ellipse at 50% 50%, #999696 2.75vmin, #fff0 calc(2.75vmin + 2px) 100%), #d3d5de;
            border-radius: 100%;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="toggle"><input type="checkbox" id="btn" /><label for="btn"><span class="thumb"></span></label></div>
</body>

</html>